
// style quick set background,color and border
s-bg(bg, s = cover, p = center, r = no-repeat) {
  background: bg;
  background-size: s;
  background-position: p;
  background-repeat: r;
}

// text quick set font-size, line-height, color
t-fl(s, lh = s, c = false) {
  font-size: s;
  line-height: lh;

  if (c && typeof(c) == 'rgba') {
    color: c;
  } else if (c) {
    text-align: center;
  }
}

// text quick set over word ellipsis
t-clamp(n) {
  if (n == 1) {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  } else {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: n;
  }
}

// #region 布局
// size
l-wh(w, h = w, r = false) {
  width: w;
  height: h;

  if (r) {
    border-radius: r;
  }
}

// quick set about flex attribute
l-flex(dir, jc = fs, ai = st, w = nowrap) {
  $flex_direction = {
    h: row,
    hr: row-reverse,
    v: column,
    vr: column-reverse
  };
  $flex_content = {
    fs: flex-start,
    c: center,
    fe: flex-end,
    sa: space-around,
    se: space-evenly,
    sb: space-between
  };
  $flex_items = {
    fs: flex-start,
    c: center,
    fe: flex-end,
    st: stretch
  };
  display: flex;
  flex-direction: $flex_direction[dir];
  justify-content: $flex_content[jc];
  align-items: $flex_items[ai];
  flex-wrap: w;
}

// spacing horizontal margin
l-mh(l, r = l) {
  margin-left: l;
  margin-right: r;
}

// spacing vertical margin
l-mv(t, b = t) {
  margin-top: t;
  margin-bottom: b;
}

// spacing horizontal padding
l-ph(l, r = l) {
  padding-left: l;
  padding-right: r;
}

// spacing vertical padding
l-pv(t, b = t) {
  padding-top: t;
  padding-bottom: b;
}

// position
_pos(type, x = auto, y = auto, dir = 'lt') {
  position: unquote(type);

  if (dir == 'lt') {
    left: x;
    top: y;
  } else if (dir == 'rt') {
    right: x;
    top: y;
  } else if (dir == 'lb') {
    left: x;
    bottom: y;
  } else if (dir == 'rb') {
    right: x;
    bottom: y;
  }
}

// position relative
l-rel(x = auto, y = auto, r = 'lt') {
  _pos('relative', x, y, r);
}

// position absolute
l-abs(x = auto, y = auto, r = 'lt') {
  _pos('absolute', x, y, r);
}

// position fixed
l-fix(x = auto, y = auto, r = 'lt') {
  _pos('fixed', x, y, r);
}

// #endregion

// #region animation
// animation
a-eff(n, ms, d = 0) {
  animation-name: n;
  animation-duration: ms;
  animation-delay: d;
}

a-loop(t = infinite, re = false) {
  animation-iteration-count: t;

  if (re) {
    animation-direction: alternate;
  }
}